<template>
  <div class="">
    <div class="actors">
      <h2>演职人员</h2>
      <swiper :swiperOption="swiperOption">
        <swiper-slide v-for="(item, index) in actors" :key="index">
          <img :src="item.avatarAddress" alt="" />
          <b>{{ item.name }}</b>
          <p>{{ item.role }}</p>
        </swiper-slide>
      </swiper>
    </div>
    <div class="photos">
      <h2>剧照</h2>
      <swiper :swiperOption="swiperOption2">
        <swiper-slide v-for="item in photos" :key="item">
          <img :src="item" alt="" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
// 引入组件和插件
import Swiper from "@/components/Swiper";
import { swiperSlide } from "vue-awesome-swiper";
export default {
  props: ["actors", "photos"],
  components: {
    Swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 15,
        freeMode: true,
      },
      swiperOption2: {
        slidesPerView: 2,
        spaceBetween: 15,
        freeMode: true,
      },
    };
  },
};
</script>

<style scoped  lang="less" >
.swiper-container {
  // touch-action: none;
  text-align: center;
  img {
    width: 100%;
  }
}
.actors {
  background-color: #fff;
  margin: 10px 0;
  img {
    height: 110px;
  }
}
.photos {
  background-color: #fff;
  img {
    height: 120px;
  }
}
</style>